<template>
  <ui-container class="page-index">
    <div class="box">
      <ui-user-info class="ui-user-info"></ui-user-info>
      <div class="box-right">
        <ui-swipers class="ui-swipers"></ui-swipers>
        <ui-todo-list class="ui-todo-list"></ui-todo-list>
      </div>
    </div>

    <ui-often-menu class="ui-often-menu"></ui-often-menu>

    <div class="box">
      <!-- 资产总览 -->
      <ui-asset-view class="ui-asset-view"></ui-asset-view>
      <!-- 账户信息 -->
      <ui-acc-info class="ui-acc-info"></ui-acc-info>
    </div>

    <ui-invest-finan class="ui-invest-finan"></ui-invest-finan>

    <div class="bottom-img">
      <img class="img-left" src="@/assets/image/home/leftBottom.png" alt />
      <img class="img-right" src="@/assets/image/home/rightBottom.png" alt />
    </div>
  </ui-container>
</template>

<script>
import uiOftenMenu from './components/ui-often-menu';
import uiSwipers from './components/ui-swipers';
import uiTodoList from './components/ui-todo-list';
import uiUserInfo from './components/ui-user-info';
import uiAccInfo from './components/ui-acc-info';
import uiAssetView from './components/ui-asset-view';
import uiInvestFinan from './components/ui-invest-finan';
export default {
  components: {
    uiOftenMenu,
    uiSwipers,
    uiTodoList,
    uiUserInfo,
    uiAccInfo,
    uiAssetView,
    uiInvestFinan,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.page-index {
  .box {
    display: flex;
    justify-content: space-between;
    .ui-user-info {
      width: 50%;
    }
    .box-right {
      width: calc(50% - 10px);
      height: 220px;
      .ui-todo-list {
        height: calc(100% - 64px);
      }
      .ui-swipers {
        height: 40px;
      }
    }

    .ui-acc-info {
      width: 50%;
    }
    .ui-asset-view {
      width: calc(50% - 10px);
    }
  }
  .ui-often-menu {
    margin-bottom: 10px;
    display: flex;
  }
  .ui-invest-finan {
    margin-top: 10px;
  }
  .bottom-img {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .img-left {
      width: 50%;
      height: auto;
    }
    .img-right {
      width: calc(50% - 10px);
      height: auto;
    }
  }
}
</style>
